<template>
  <el-container>
    <div class="abs">
      <el-alert title="修改密码" type="info" :closable="false"></el-alert>
      <el-card class="box-card">
        <el-form
          :model="form"
          :rules="rule"
          ref="form"
          hide-required-asterisk
          label-position="left"
          label-width="100px"
        >
          <el-form-item label="当前密码：" prop="currentPwd">
            <el-input
              placeholder="请输入当前密码"
              v-model="form.currentPwd"
              type="password"
            ></el-input>
          </el-form-item>
          <el-form-item label="新密码：" prop="newPwd">
            <el-input
              placeholder="请输入新密码"
              v-model="form.newPwd"
              type="password"
            ></el-input>
          </el-form-item>
          <el-form-item label="确认密码：" prop="confirmPwd">
            <el-input
              placeholder="请输入确认密码"
              v-model="form.confirmPwd"
              type="password"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="info" @click="submit">提交</el-button>
            <el-button @click="back">返回</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </el-container>
</template>

<script>
import Axios from "axios";
import * as serviceApi from "../../common/service.config";
import md5 from "js-md5";
Axios.defaults.withcredentials = true;

export default {
  name: "ChangePwd",
  data() {
    let reg = /(?!^(\d+|[a-zA-Z]+|[~!@#$%^&*?]+)$)^[\w~!@#$%^&*?]{6,12}$/;
    var validateConfirmPwd = (rule, value, callback) => {
      if (!reg.test(value)) {
        callback(new Error("密码应是6-12位数字、字母或字符！"));
      } else if (this.form.newPwd !== value) {
        callback(new Error("确认密码与新密码不一致！"));
      } else {
        callback();
      }
    };
    return {
      form: {
        currentPwd: "",
        newPwd: "",
        confirmPwd: "",
      },
      rule: {
        currentPwd: [
          { required: true, message: "请输入当前密码", trigger: "blur" },
        ],
        newPwd: [
          { required: true, message: "请输入新密码", trigger: "blur" },
          {
            pattern: reg,
            message: "密码应是6-12位数字、字母或字符！",
            trigger: "blur",
          },
        ],
        confirmPwd: [
          { required: true, message: "请输入确认密码", trigger: "blur" },
          { validator: validateConfirmPwd, trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    submit() {
      let queryData = {
        userName: sessionStorage.getItem("token"),
        passWord: md5(this.form.currentPwd),
        newPassWord: md5(this.form.newPwd),
      };
      this.$refs["form"].validate((valid) => {
        if (valid) {
          Axios({
            url: serviceApi.KB_API,
            method: "post",
            data: `appMsg={"parameter":"{\\"userName\\":\\"${queryData.userName}\\",\\"passWord\\":\\"${queryData.passWord}\\",\\"newPassWord\\":\\"${queryData.newPassWord}\\"}","serviceCode":"modifyPassWord","timestamp":"","uuid":""}`,
          }).then((res) => {
            if (res.data.resultcode == "0000") {
              this.$message({
                message: res.data.parameter.message,
                type: "success",
                duration: 1000,
                onClose: () => {
                  sessionStorage.removeItem("token");
                  this.$router.push("login");
                },
              });
            } else {
              this.$message({
                message: res.data.message,
                type: "error",
                duration: 1000,
                onClose: () => {
                  this.$refs["form"].resetFields();
                }
              });
            }
          });
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.el-container {
  width: 100%;
  height: 100%;
  .abs {
    position: absolute;
    left: 0;
    top: 6.3%;
    width: 100%;
    height: 93.6%;
    .el-alert {
      line-height: 30px;
      margin-top: 20px;
      /deep/ .el-alert__title {
        font-size: 16px;
      }
    }
    .box-card {
      width: 80%;
      height: 80%;
      margin: 0 auto;
      margin-top: 50px;
      .el-form {
        width: 30%;
        margin: 0 auto;
        margin-top: 10%;
      }
    }
  }
}
</style>